<script setup lang="ts">
import {ref, onMounted} from 'vue';
import * as echarts from "echarts";
let myHeading = ref(null)
onMounted(()=>{
  // let {proxy} = getCurrentInstance();
  // console.log(proxy.$echarts)
  // console.log(proxy.$axios)
  let myEcharts = echarts.init(myHeading.value);
  window.addEventListener('resize', function () {
    myEcharts.resize()
  })
  const option =   {
    // tooltip: {
    //   trigger: 'item',
    //   formatter: '{a} <br/>{b}: {c} ({d}%)'
    // }
    legend: {
      top: '33%',
      left: '10%',
      orient: 'vertical',
      itemGap: 70,
      icon: 'square',
      data: [
        '销售数据显示',
        '运营数据展示'
      ],
      formatter: function (name) {
        const sum = 1000
        if (name === '销售数据显示') {
          const percentage = ((333.3 / sum) * 100).toFixed(2)
          return '{a|' + name + '}\n{b|' + percentage + '%}'
        } else {
          const percentage = ((666.6 / sum) * 100).toFixed(2)
          return '{a|' + name + '}\n{b|' + percentage + '%}'
        }
      },
      textStyle: {
        rich: {
          a: {
            color: '#878787',
            fontWeight: '400',
            fontSize: 12
          },
          b: {
            color: '#000000',
            fontWeight: '300',
            fontSize: 18,
            lineHeight: 40
          }
        }
      }
    },
    series: [
      {
        name: 'Access From',
        left: '30%',
        type: 'pie',
        radius: ['22%', '30%'],
        label: {
          show: false
        },
        data: [
          { value: 500, itemStyle: { color: '#e9f4f6' } },
          { value: 500, name: '销售数据显示', itemStyle: { color: '#f57b00' } }
        ]
      },
      {
        name: 'Access From',
        type: 'pie',
        left: '30%',
        radius: ['42%', '50%'],
        label: {
          show: false
        },
        data: [
          { value: 500, itemStyle: { color: '#e9f4f6' } },
          { value: 500, name: '运营数据展示', itemStyle: { color: '#ffb300' } }
        ]
      }
    ]
  }
  myEcharts.setOption(option)
})
</script>

<template>
  <div id="echarts" ref="myHeading" style="width: 48%; height: 400px"></div>
</template>

<style scoped lang="scss">
#echarts{
  //margin-top: 15px;
  box-shadow: 0px 10px 16px 0px
  rgba(132, 132, 152, 0.68);
  background: white;
  opacity: 0.9;
  border-radius: 15px;
  ::v-deep >div:first-child{
    width: 100%!important;
    canvas{
      width: 100%!important;
    }
  }
}
</style>
